<script type="text/javascript">
    function add_hours(number_of_days_input){
        var number_of_days = parseInt($("#"+number_of_days_input).val(),10);
        var class_times = $("#"+number_of_days_input).parent().find(".class_time");
        var class_time_interface = '{$class_time_interface}';
        var returnn='';
        
        if(class_times.length < number_of_days){
            for(var i = class_times.length; i < number_of_days ; i++){
                var interface_to_append = class_time_interface; 
                interface_to_append = str_replace('name="class_day"','name="class_day'+i+'"',interface_to_append);
                interface_to_append = str_replace('name="class_start"','name="class_start'+i+'"',interface_to_append);
                interface_to_append = str_replace('name="class_end"','name="class_end'+i+'"',interface_to_append);
                returnn += interface_to_append;
            }
            $("#"+number_of_days_input).parent().find(".class_hours").append(returnn);
        }else if(class_times.length == number_of_days){
            return;
        }else if(class_times.length > number_of_days){
            for(var i = number_of_days; i < class_times.length; i++){
                $("#"+number_of_days_input).parent().find(".class_time:last").remove();
            }
        }
        
        load_time_picker_anim();
        load_time_picker_triggers();
    }
</script>
<fieldset>
    <legend><h3>{__ t = "Instituição"}</h3></legend>
        <div id="institution">
        {if isset($institution)}
            {$institution}
           {else}
               <h3></h3>
        {/if}
        </div>
</fieldset>
{if isset($institution)}          
    <fieldset id="new_course" >
        <legend><h3>{__ t = "Nova Matéria"}</h3></legend>
         {$course_form}
    </fieldset>


    <div id="courses_accordion">
        {foreach $courses as $course}
            {$course}
        {/foreach}
    </div>

    <a href='{$URL_ROOT}grademagica/gerar'><button id='generate_grid_button'>{__ t = 'Gerar Grades!'}</button></a>
{/if}

<div class="time_picker main_copy">
    <span class="focused_time_field_id"></span>
    <div><span class="time_picked">00:00</span><span class="offset"></span></div>
    <div><span class="time_picked">00:30</span><span class="offset"></span></div>
    <div><span class="time_picked">01:00</span><span class="offset"></span></div>
    <div><span class="time_picked">01:30</span><span class="offset"></span></div>
    <div><span class="time_picked">02:00</span><span class="offset"></span></div>
    <div><span class="time_picked">02:30</span><span class="offset"></span></div>
    <div><span class="time_picked">03:00</span><span class="offset"></span></div>
    <div><span class="time_picked">03:30</span><span class="offset"></span></div>
    <div><span class="time_picked">04:00</span><span class="offset"></span></div>
    <div><span class="time_picked">04:30</span><span class="offset"></span></div>
    <div><span class="time_picked">05:00</span><span class="offset"></span></div>
    <div><span class="time_picked">05:30</span><span class="offset"></span></div>
    <div><span class="time_picked">06:00</span><span class="offset"></span></div>
    <div><span class="time_picked">06:30</span><span class="offset"></span></div>
    <div><span class="time_picked">07:00</span><span class="offset"></span></div>
    <div><span class="time_picked">07:30</span><span class="offset"></span></div>
    <div><span class="time_picked">08:00</span><span class="offset"></span></div>
    <div><span class="time_picked">08:30</span><span class="offset"></span></div>
    <div><span class="time_picked">09:00</span><span class="offset"></span></div>
    <div><span class="time_picked">09:30</span><span class="offset"></span></div>
    <div class="selected"><span class="time_picked">10:00</span><span class="offset"></span></div>
    <div><span class="time_picked">10:30</span><span class="offset"></span></div>
    <div><span class="time_picked">11:00</span><span class="offset"></span></div>
    <div><span class="time_picked">11:30</span><span class="offset"></span></div>
    <div><span class="time_picked">12:00</span><span class="offset"></span></div>
    <div><span class="time_picked">12:30</span><span class="offset"></span></div>
    <div><span class="time_picked">13:00</span><span class="offset"></span></div>
    <div><span class="time_picked">13:30</span><span class="offset"></span></div>
    <div><span class="time_picked">14:00</span><span class="offset"></span></div>
    <div><span class="time_picked">14:30</span><span class="offset"></span></div>
    <div><span class="time_picked">15:00</span><span class="offset"></span></div>
    <div><span class="time_picked">15:30</span><span class="offset"></span></div>
    <div><span class="time_picked">16:00</span><span class="offset"></span></div>
    <div><span class="time_picked">16:30</span><span class="offset"></span></div>
    <div><span class="time_picked">17:00</span><span class="offset"></span></div>
    <div><span class="time_picked">17:30</span><span class="offset"></span></div>
    <div><span class="time_picked">18:00</span><span class="offset"></span></div>
    <div><span class="time_picked">18:30</span><span class="offset"></span></div>
    <div><span class="time_picked">19:00</span><span class="offset"></span></div>
    <div><span class="time_picked">19:30</span><span class="offset"></span></div>
    <div><span class="time_picked">20:00</span><span class="offset"></span></div>
    <div><span class="time_picked">20:30</span><span class="offset"></span></div>
    <div><span class="time_picked">21:00</span><span class="offset"></span></div>
    <div><span class="time_picked">21:30</span><span class="offset"></span></div>
    <div><span class="time_picked">22:00</span><span class="offset"></span></div>
    <div><span class="time_picked">22:30</span><span class="offset"></span></div>
    <div><span class="time_picked">23:00</span><span class="offset"></span></div>
    <div><span class="time_picked">23:30</span><span class="offset"></span></div>
</div>